<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
    *{
    box-sizing: border-box;
    }
    body{
    	border: 0px;
    	margin: 0px;
    	padding: 0px;
    }
	.nav{
		width:100%;
		height:6%;
		background-color: #009688;
	
	}
	.left{
		width:15%;
		height:6%;
		position:absolute;
		padding-left: 2%;
		padding-top: 0.5%;
		font-size: 19px;
		color:white;
	
	}
	.center{
		width:15%;
		height:6%;
		position:absolute;
		margin-top:0px;
		margin-left:15%;
		padding-left: 4%;
		padding-top: 0.5%;
		cursor: pointer;
		line-height: 20px;
		
	}
	.s1{
		background-color: #009688;
		outline-color: #009688;
		border:0; 
		color: white;
		font-size: 16px;
	}
	 

		.right{
		width:20%;
		height:6%;
		position:absolute;
		margin-top:0px;
		margin-left:80%;
		padding-left: 4%;
		padding-top: 0.5%;
		
	}
	
	.c2{
		width:15%;
		height:94%;
		position:absolute;
		background-color: #EEEEEE;
	 }
	 #u1{
	 	list-style-type: none;
	 	line-height: 50px;
	 	margin-top: 10%;
	  }
	 
	   ol{
	   		list-style-type:upper-roman;
	   		display: none;
	   }
	 a{
	 	text-decoration: none;
	 	color: black;
	 	
	 }
	 	 .c3{
		width:85%;
		height:6%;
		position:absolute;
		margin-left:15%;
		background-color: #F2F2F2;
		padding-left: 3%;
		padding-top: 1%;
		font-size: 16px;
		letter-spacing: 3px;
		
	 } 
	 iframe {
	 position:absolute;
	 margin-left:15%;
	 margin-top:2.8%;
	 width: 85%;
	 height: 88.4%;	 
}
	#u1 input{
		border:none;
	}
</style>
</head>
<body style="height: 100%">
	<div class="nav">
		<div class="left">公寓管理系统</div>
		<div class="center">
			 <form action="" >
				<select class="s1">
					<option value="">新增</option>
					<option value="">房屋</option>
					<option value="">房租</option>
					<option value="">租户</option>
				</select>
			</form> 
			
			
		</div>
		<div class="right">
			<form action="" >
				<select class="s1">
					<option value="">admin</option>
					<option value="">个人信息</option>
					<option value="">退出</option>
					<option value="">切换账号</option>
				</select>&nbsp;&nbsp;&nbsp;
			<font color="white" size="2px">后端首页</font>
			</form>
		</div>
	</div>
	<div class="c2">
		<ul id="u1">
			<li ><img src="./image/user.png" width="10%" height="10%"><!-- <input type="button" onclick="one()" value="公寓管理"> --><a href="#" onclick="one()">公寓管理</a>
				<ol id="o1">
				<li> <a href="/houseQueryAll" target="i" >房屋信息</a></li>
				<li> <a href="/contractQueryAll" target="i">合同信息</a></li>
				<li> <a href="/lesseeQueryAll" target="i">租户信息</a></li>
				<li> <a href="/rentQueryAll" target="i">房租信息</a></li>
				</ol>
				
			</li>
			<li><img src="./image/过闸记录查询.png" width="10%" height="10%"><!-- <input type="button" onclick="two()" value="服务管理"> --><a href="#" onclick="two()">服务管理</a>
				<ol id="o2">
				<li><a href="/logisticsQueryAll" target="i">后勤人员</a></li>
				<li> <a href="/repairQueryAll" target="i">修缮记录</a></li>
				<li> <a href="/activityQueryAll" target="i">公寓活动</a></li>
				</ol>
			</li>
			<li><img src="./image/database.png" width="10%" height="10%"><!-- <input type="button" onclick="three()" value="管理员"> --><a href="#" onclick="three()">管理员</a>
				<ol id="o3">
				<li>
					<a href="/userQueryAll" target="i">用户管理</a>
				</li>
				<li>
					<a href="/roleQueryAll" target="i">角色管理</a>
				</li>
				</ol>
			</li>
		</ul>
	</div>
	<div class="c3"><img src="./image/home.png" width="20px" height="20px">&nbsp;<a href="./welcome.html" target="i">我的桌面</div>
	<iframe name="i" src="./welcome.html" frameborder="0" scrolling="no">
		
	</iframe>
	<script type="text/javascript">
	function one() {
	var o1 = document.getElementById("o1");
		if(o1.style.display != "none"){
			o1.style.display = "none";
		}
		else{
			o1.style.display = "block";
		}
		
		
	}
	
	function two(){
		var o2 = document.getElementById("o2");
		if(o2.style.display != "none"){
			o2.style.display = "none";
		}else{
			o2.style.display = "block";
	}
	}
	function three(){
		var o3 = document.getElementById("o3");
		if(o3.style.display != "none"){
				o3.style.display = "none";
			}else{
				o3.style.display = "block";
		}
	}	
	</script>
</body>
</html>